<template>
  <div style="width: 650px">
    <el-form
      ref="dataForm"
      :model="entity"
      :rules="formRules"
      label-width="160px"
    >
      <el-form-item label="账号" prop="userAccount">
        <div style="text-align: left">
          {{ entity.userAccount }}
        </div>
      </el-form-item>
      <el-form-item label="手机号" prop="userPhone">
        <InputText v-model="entity.userPhone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="邮箱" prop="userEmail">
        <InputText v-model="entity.userEmail" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="昵称" prop="userNickName">
        <InputText v-model="entity.userNickName" placeholder="请输入昵称" />
      </el-form-item>

      <el-form-item
        v-if="faceEnabled"
        label="人脸认证图像"
        prop="userFaceImage"
      >
        <j-image-upload v-model="entity.userFaceImage">
          <template #button>
            <Button text @click="faceCameraDialog.visible = true">拍照</Button>
          </template>
        </j-image-upload>
        <j-face-camera-dialog
          :dialog="faceCameraDialog"
          @success="captureHandler"
        />
      </el-form-item>

      <el-form-item label="角色">
        <Tag v-for="role in entity.roles" :key="role.id">
          {{ role.roleName }}
        </Tag>
      </el-form-item>

      <el-form-item label="部门">
        <Tag v-if="entity.userDeptId == 0" type="danger"> 最高管理部 </Tag>
        <Tag v-else-if="entity.deptName">
          {{ entity.deptName }}
        </Tag>
      </el-form-item>

      <el-form-item>
        <Button :loading="loading" @click="submitHandler">提交</Button>
      </el-form-item>

      <el-form-item v-if="faceEnabled" label="信任设备">
        <ToggleSwitch v-model="binded" @change="bindDeviceHandler" />
        <span style="margin-left: 20px; color: red"
          >（对设备授信允许您在本机开启人脸识别登录）</span
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getInfo, putInfo } from '@/api/personal'
import { fetchList, bindDevice, unbindDevice } from '@/api/personal/device'
import { regular } from '@/utils/formRegular'

import JImageUpload from '@/components/JImageUpload'
import JFaceCameraDialog from '@/components/JFaceCamera/JFaceCameraDialog'

export default {
  name: 'MyInfo',
  data() {
    return {
      loading: false,
      entity: {},
      formRules: {
        userPhone: [
          {
            pattern: regular.mobile,
            message: regular.mobileMsg,
            trigger: 'blur',
          },
        ],
        userEmail: [
          {
            type: 'email',
            message: '请输入正确的邮箱',
            trigger: 'blur',
          },
        ],
      },
      binded: false,
      faceCameraDialog: {
        visible: false,
        value: null,
      },
      loginLoading: false,
    }
  },
  computed: {
    device() {
      return this.$store.getters.device
    },
    faceEnabled() {
      return window.config.faceEnabled
    },
  },
  components: {
    JImageUpload,
    JFaceCameraDialog,
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getInfo(true).then((res) => {
        this.entity = res.data.data
      })
      fetchList({
        deviceUid: this.device.deviceUid,
      }).then((res) => {
        this.binded = res.data.data.length > 0
      })
    },
    submitHandler() {
      this.loading = true
      putInfo(
        {
          userPhone: this.entity.userPhone,
          userEmail: this.entity.userEmail,
          userNickName: this.entity.userNickName,
        },
        this.entity.userFaceImage
      )
        .then((res) => {
          this.$message.success('操作成功')
          this.$store.commit('personal/SET_INFO', res.data.data)
        })
        .finally(() => {
          this.loading = false
        })
    },
    bindDeviceHandler() {
      if (this.binded) {
        bindDevice(this.device)
          .then(() => {
            this.$message.success('设备绑定成功')
            this.$store.commit('device/SET_DEVICE_USER', {
              userId: this.entity.id,
              username: this.entity.userAccount,
            })
            this.binded = true
          })
          .catch(() => {
            this.binded = false
          })
      } else {
        unbindDevice(this.device.deviceUid)
          .then(() => {
            this.$message.success('设备已解绑')
            this.$store.commit('device/CLEAR_DEVICE_USER')
            this.binded = false
          })
          .catch(() => {
            this.binded = true
          })
      }
    },
    captureHandler() {
      this.entity.userFaceImage = this.faceCameraDialog.value
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fff;
}

.form {
  padding: 10px;
  max-width: 900px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style lang="scss">
.faceCameraDialog {
  width: 680px;
}
</style>
